<!-- 包装规则信息弹窗 -->
<template>
  <el-dialog append-to-body :title="title" :visible.sync="visible" @close="close" width="60%" top="5vh">
    <avue-crud
      ref="crud"
      v-model="form"
      :table-loading="loading"
      :data="data"
      :option="tableOption"
      @search-change="searchChange"
      @search-reset="searchReset"
      :page.sync="page"
      @row-click="rowClick"
      @row-dblclick="rowDbclick"
    >
      <template slot="serialNumberName" slot-scope="{ row }">
        <el-input disabled placeholder="" v-model="row.serialNumberName" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="searchSerialNumberName"></el-button>
        </el-input>
      </template>
      <template slot="signName" slot-scope="{ row }">
        <el-input disabled placeholder="" v-model="row.signName" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="searchSignName"></el-button>
        </el-input>
      </template>
      <template slot="customCode" slot-scope="{ row }">
        <el-input disabled placeholder="" v-model="row.customCode" class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </template>
    </avue-crud>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="submitForm">保 存</el-button>
      <el-button size="small" icon="el-icon-circle-close" @click="visible = false">取 消</el-button>
    </div>
    <!-- 物料基础数据 弹框 -->
    <common-modal-template ref="commonModalTemplate" :option="commonTableOption" @getSelectedRows="getSelectedRows" :key="timer" @newKey="newKey"> </common-modal-template>
  </el-dialog>
</template>

<script>
import CommonModalTemplate from '@/components/common-modal-template/common-modal-template.vue';
export default {
  name: 'SequenceRuleModal',
  components: {
    CommonModalTemplate
  },
  props: {
    config: {
      require: true,
      default: () => {}
    }
  },
  data() {
    return {
      title: '',
      visible: false,
      loading: false,
      data: [],
      page: {
        pageSize: 1000,
        currentPage: 1,
        total: 0
      },
      tableOption: {
        height: 'auto',
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        delBtn: true,
        editBtn: false,
        selection: false,
        dialogClickModal: false,
        labelWidth: 120,
        menuWidth: 80,
        column: [
          {
            label: '序列号名称',
            prop: 'serialNumberName',
            slot: true
          },
          {
            label: '打印标签名称',
            prop: 'signName',
            slot: true
          },
          {
            label: '客户编码',
            prop: 'customCode',
            slot: true
          },
          {
            label: '客户名称',
            prop: 'principal'
          }
        ]
      },
      commonTableOption: {}, //公用模态框配置信息
      timer: new Date().getTime() //不同内容使用同一个模态框结构，key值不同需要重新请求渲染数据，否则会请求到上一个使用的数据内容
    };
  },
  watch: {
    config: {
      handler(value) {
        let copyData = this._cloneDeep(value);
        this.data = copyData.data;
        this.title = copyData.title;
        this.visible = copyData.visible;
        this.loading = copyData.loading;
      },
      deep: true
    }
  },
  mounted() {
    this.data = this.config.data;
    this.title = this.config.title;
    this.visible = this.config.visible;
    this.loading = this.config.loading;
  },
  methods: {
    openUserCommonModal(params) {
      let { type } = params;
      switch (type) {
        // 序列号名称
        case 'serialNumberName':
          this.openSerialNumberNameModal();
          break;
        //   打印标签名称;
        case 'signName':
          this.openSignNameModal();
          break;
        default:
          break;
      }
    },
    // 序列号名称 弹框 配置
    openSerialNumberNameModal() {
      this.modalName = 'serialNumberNameModal';
      this.$refs.commonModalTemplate.showModal();
      this.commonTableOption = {
        modalTitle: '选择序列号规则（双击进行选择）',
        url: '/api/mes-admin/sequencedefinition/page',
        isPage: true,
        rowSelectionType: 'single',
        menu: false,
        editBtn: false,
        menuWidth: 100,
        searchLabelWidth: 100,
        columnDefs: [
          {
            label: '类型',
            prop: 'type',
            type: 'select',
            dicUrl: '/api/blade-system/dict/dictionary?code=serial_number_rule_type',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            },
            rules: [
              {
                required: true,
                message: '请输入序列号规则类型',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '名称',
            prop: 'name',
            search: true,
            rules: [
              {
                required: true,
                message: '请输入序列号规则名称',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '编码',
            prop: 'code',
            search: true,
            rules: [
              {
                required: true,
                message: '请输入序列号规则编码',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '进制字符',
            prop: 'hexString',
            hide: true,
            rules: [
              {
                required: true,
                message: '请输入进制字符',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '起始流水号',
            prop: 'startSequenceNo',
            hide: true,
            rules: [
              {
                required: true,
                message: '请输入起始流水号',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '结束流水号',
            prop: 'endSequenceNo',
            hide: true,
            rules: [
              {
                required: true,
                message: '请输入结束流水号',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '前缀字符',
            prop: 'prefix',
            rules: [
              {
                required: false,
                message: '请输入前缀字符',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '后缀字符',
            prop: 'suffix',
            rules: [
              {
                required: false,
                message: '请输入后缀字符',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '序列号规则',
            prop: 'sequencenoformat',
            formslot: true, // 定义form表单中字段的插槽
            labelTip:
              '[P]：前缀字符,[YY]：两位年份, [YYYY]：四位年份, [M]：月,<br />[W]：周, [D]：日,[S]：流水号, [N]：自定义字符。<br />[B]：后缀字符 <br />如：[YY][M][S][B]<br />若无流水号则没有[S],例如：[YY][M][B]',
            rules: [
              {
                required: true,
                message: '请输入序列号规则',
                trigger: 'change'
              }
            ]
          },
          {
            label: '规则位数',
            prop: 'charactersCount',
            type: 'number',
            precision: 0,
            minRows: 1,
            rules: [
              {
                required: false,
                message: '请输入序列号规则位数',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '清零类型',
            prop: 'regressionType',
            type: 'select',
            dicData: [
              {
                label: '不清零',
                value: 'null'
              },
              {
                label: '年',
                value: 'yearType'
              },
              {
                label: '月',
                value: 'monthType'
              },
              {
                label: '周',
                value: 'weekType'
              },
              {
                label: '日',
                value: 'dayType'
              }
            ],
            rules: [
              {
                required: true,
                message: '请输入清零类型',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '增量',
            prop: 'incrementQty',
            type: 'number',
            hide: true,
            rules: [
              {
                required: false,
                message: '请输入增量',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '分组规则',
            prop: 'groupingRule',
            rules: [
              {
                required: false,
                message: '请输入分组规则',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '过滤字符',
            prop: 'filterChar',
            rules: [
              {
                required: false,
                message: '请输入过滤字符',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '分隔符',
            // 每个占位符之间的分隔符，用于识别外来编码每个部分的值，比如‘；’，‘/’等，如果需要用于识别条码，必须要配置分隔符。
            prop: 'delimiter',
            type: 'select',
            dicUrl: '/api/blade-system/dict/dictionary?code=delimiter_type',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            },
            rules: [
              {
                required: true,
                message: '请选择分隔符',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '同时用于识别条码',
            // 每位占位符都代表着一定的业务意义，解析出来导入系统。比如约定WO代表工单号。
            prop: 'isIdentifyAlso',
            type: 'switch', //开关的类型
            align: 'center',
            width: 100,
            dicData: [
              {
                label: '否',
                value: false
              },
              {
                label: '是',
                value: true
              }
            ],
            value: 0,
            slot: true,
            rules: [
              {
                required: true,
                message: '请选择是否同时用于识别条码',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '占位符替换',
            // 如果是，需要在mes_sequence_holder_replacement增加规则。
            prop: 'requirePlaceholderReplacement',
            type: 'switch', //开关的类型
            align: 'center',
            width: 100,
            dicData: [
              {
                label: '否',
                value: false
              },
              {
                label: '是',
                value: true
              }
            ],
            value: 0,
            slot: true,
            rules: [
              {
                required: true,
                message: '是否需要占位符替换',
                trigger: 'blur'
              }
            ]
          }
        ]
      };
    },
    openSignNameModal() {
      this.modalName = 'signNameModal';
      this.$refs.commonModalTemplate.showModal();
      this.commonTableOption = {
        modalTitle: '选择标签模板（双击进行选择）',
        url: '/api/mes-admin/labeltemplate/page?status=1',
        isPage: true,
        rowSelectionType: 'single',
        menu: false,
        editBtn: false,
        menuWidth: 100,
        searchLabelWidth: 100,
        columnDefs: [
          {
            label: '名称',
            prop: 'fileName',
            search: true
          },
          {
            label: '代码',
            prop: 'code',
            search: true
          },
          {
            label: '版本名称',
            prop: 'revision'
          },
          {
            label: '缩略图',
            prop: 'thumbnailUrl',
            type: 'upload',
            loadText: '缩略图上传中，请稍等',
            propsHttp: {
              url: 'link',
              name: 'originalName',
              res: 'data'
            },
            listType: 'picture',
            limit: 1,
            accept: 'image/png, image/jpeg, image/jpg',
            tip: '只能上传png/jpeg/jpg文件',
            action: '/api/blade-resource/oss/endpoint/put-file'
          },
          {
            label: '打印标签',
            prop: 'fileUrl'
          },
          {
            label: '类型',
            prop: 'type',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            },
            dicUrl: '/api/blade-system/dict/dictionary?code=label_template_type'
          },
          {
            label: '打印列数',
            prop: 'columnCount'
          },
          {
            label: '打印份数',
            prop: 'copies'
          },
          {
            label: '客户',
            prop: 'clientName'
          }
        ]
      };
    },
    // 获取选择的模态框行数据
    getSelectedRows(rowData) {
      console.log(rowData);
      switch (this.modalName) {
        case 'serialNumberNameModal':
          console.log(rowData.name);
          //   this.form.productionOrderNo = this._get(rowData, 'orderNo', '');
          break;
        case 'signNameModal':
          break;
        default:
          break;
      }
    },
    // 重新加载公用表格弹窗组件
    newKey() {
      this.timer = new Date().getTime();
    },
    searchSerialNumberName() {
      this.openUserCommonModal({
        type: 'serialNumberName'
      });
    },
    searchSignName() {
      this.openUserCommonModal({
        type: 'signName'
      });
    },
    close() {
      this.$emit('close', 123);
    }
  }
};
</script>
